import React, { useEffect, useState } from 'react'
import http from '../../utils/http'
import styles from './index.module.css'
import { SubmitBar } from 'react-vant';
import { UploadOutline, HeartOutline, MailOutline } from 'antd-mobile-icons'
import { useNavigate, useParams } from 'react-router-dom'
import { NavBar, List } from 'antd-mobile'
function Index() {
    const navigate = useNavigate()
    const { id } = useParams()
    const [list, setList] = useState({})
    const getList = async () => {
        const res = await http.get('/api/list/detail', { params: { id } })

        console.log(res);

        const { code, data } = res.data

        if (code === 200) {
            setList(data)
        }

    }

    useEffect(() => {
        getList()
    }, [])

    const onSubmit = () => {
        navigate('/tick', { state: list })
        localStorage.setItem('list',JSON.stringify(list) || [])
    }
    return (
        <div>
            <NavBar onBack={() => navigate(-1)} right={<div style={{ display: 'flex', fontSize: '25px', marginLeft: '10px' }}> <span><UploadOutline /></span> <span><HeartOutline /></span> </div>}></NavBar>
            <div>
                <div>
                    <img src={list.image} alt="" className={styles.image_wroe} />
                </div>
                <div>
                    <h2 className={styles.text_wroe}>{list.title}</h2>
                </div>
                <div className={styles.box_wroe}>
                    <div className={styles.span_wroe}>
                        <span>
                            <List>
                                <List.Item description={<span>3月</span>}>29</List.Item>
                            </List>
                        </span>
                        <span>
                            <List>
                                <List.Item description={<span>晚上10点 -结束</span>}>周二</List.Item>
                            </List>
                        </span>
                    </div>
                    <div>
                        <span className={styles.icon_wroe}><MailOutline /></span>
                    </div>
                </div>
                <div className={styles.text_wroe}>
                    <h2>关于本次活动</h2>
                    <span>
                        神盾局开收据上看的剧开始的是的速度读的局势的空间山
                        东矿机当升科技似的涉及到付款时间的好时机当惊世界殊
                        是多久发货刷卡机粉红色抠脚大汉反馈都是结合方式登记
                        圣诞节 <br />
                        说的就是空间大V很深刻的积分回复速度快解放后速度快
                        <p>显示更多</p>
                    </span>
                </div>
                <div>
                    <SubmitBar textAlign='left' label=' ' price={list.price * 100} onSubmit={() => onSubmit()} buttonText="立即购票" />
                </div>
            </div>
        </div>
    )
}

export default Index
